{% extends 'generic/Popup.twig' %}
{% block popup_id %}simple-stats-popup{% endblock %}
{% block title %}Grading Statistics{% endblock %}
{% block body %}
    {% if num_users > 0 %}
        {# This is a data table #}
        <caption />
        <table class="table table-striped table-bordered persist-area">
            <thead>
                <tr>
                    <th width="33%"><b>By Section</b></th>
                    <th width="33%">Average</th>
                    <th width="33%">Std. Deviation</th>
                </tr>
            </thead>
            {% for section, info in sections |filter((section,info) => section != null) %}
                <tbody>
                <tr>
                    <td>{{ section }}</td>
                    <td id="avg-section-{{ section }}"></td>
                    <td id="stddev-section-{{ section }}"></td>
                </tr>
                </tbody>
            {% endfor %}
            <thead>
            <tr>
                <td><b>By Component</b></td>
                <td colspan="2"></td>
            </tr>
            </thead>
            {% for component in components_numeric %}
                <tbody>
                <tr>
                    <td>{{ component.getTitle() }}</td>
                    <td id="avg-component-{{ loop.index0 }}"></td>
                    <td id="stddev-component-{{ loop.index0 }}"></td>
                </tr>
                </tbody>
            {% endfor %}
            <thead>
            <tr>
                <td width="33%"><b>Total</b></td>
                <td width="33%" id="avg-total"></td>
                <td width="33%" id="stddev-total"></td>
            </tr>
            </thead>
        </table>
        <br>
        {# This is a layout table #}
        <table class="table table-striped table-bordered persist-area">
            <tbody>
            <tr>
                <td width="50%">Students with a nonzero grade</td>
                <td width="50%" id="num-graded"></td>
            </tr>
            </tbody>
        </table>
    {% else %}
        <p style="text-align: center">No Statistics To View.</p>
    {% endif %}
{% endblock %}